<template>
  <div class="p-3 flex">
    <div class="w-15/20 flex h-screen">
      <div class="w-1/2">
        <div class="flex" ref="myCard">
          <div class="w-1/2 m-1 h-full"><CardShow :card-data="tenantData" /></div>
          <div class="w-1/2 m-1 h-full"><CardShow :card-data="allocation" /></div>
        </div>
        <div class="flex">
          <div class="w-1/4 m-1"><CardShow :card-data="deviceData" /></div>
          <div class="w-1/4 m-1"><CardShow :card-data="assetData" /></div>
          <div class="w-1/4 m-1"><CardShow :card-data="userData" /></div>
          <div class="w-1/4 m-1"><CardShow :card-data="customerData" /></div>
        </div>
        <div class="m-1"><CardShow :card-data="documentData" /></div>
        <div class="m-1"><CardShow :card-data="configurationFunctions" /></div>
        <div class="m-1 flex-1"><CardShow :card-data="versionData" /></div>
      </div>
      <div class="w-1/2">
        <div class="flex">
          <div class="w-1/3 m-1"><CardShow :card-data="cpuData" /></div>
          <div class="w-1/3 m-1"><CardShow :card-data="memoryData" /></div>
          <div class="w-1/3 m-1"><CardShow :card-data="diskData" /></div>
        </div>
        <div class="m-1"
          ><EchartsCard :echarts-list="echartsList" @select-time=""
        /></div>
        <div class="m-1"><MsgEchartsCard :echarts-list="msgEchartsList" /></div>
      </div>
    </div>
    <div class="w-5/20 h-screen"><StartUsingCard /> </div>
  </div>
</template>

<script setup lang="ts">
  import StartUsingCard from './StartUsingCard.vue';
  import MsgEchartsCard from './MsgEchartsCard.vue';
  import CardShow from './CardShow.vue';
  import EchartsCard from './EchartsCard.vue';
  import { ref, onMounted, Ref } from 'vue';
  import { useWebSocket } from '@vueuse/core';
  import dayjs from 'dayjs';
  let tenantData = ref<any>({
    title: '租户',
    go: true,
    addText: '添加租户',
    icon: '',
    type: 'number',
    value: '343',
    unit: {
      flag: false,
      tip: '',
      text: '',
    },
  });
  let allocation = ref<any>({
    title: '租户配置',
    go: true,
    addText: '添加配置',
    value: '43',
    icon: '',
    type: 'number',
    unit: {
      flag: false,
      tip: '',
      text: '',
    },
  });
  let cpuData = ref<any>({
    title: 'cpu',
    go: false,
    addText: '',
    value: '4%',
    icon: 'ic:baseline-check',
    type: 'number',
    unit: {
      flag: true,
      tip: '7 / 100%',
      text: '| 8 cores',
    },
  });
  let memoryData = ref<any>({
    title: '内存',
    go: false,
    addText: '',
    value: '87%',
    icon: 'solar:danger-triangle-bold',
    type: 'number',
    unit: {
      flag: true,
      tip: '7 / 100%',
      text: '| 16 Gb',
    },
  });
  let diskData = ref<any>({
    title: '磁盘',
    go: false,
    addText: '',
    value: '64%',
    icon: 'ic:baseline-check',
    type: 'number',
    unit: {
      flag: true,
      tip: '7 / 100%',
      text: '| 50 Gb',
    },
  });
  let deviceData = ref<any>({
    title: '设备',
    go: false,
    addText: '',
    value: '734',
    icon: '',
    type: 'number',
    unit: {
      flag: false,
      tip: '',
      text: '',
    },
  });
  let assetData = ref<any>({
    title: '资产',
    go: false,
    addText: '',
    value: '34',
    icon: '',
    type: 'number',
    unit: {
      flag: false,
      tip: '',
      text: '',
    },
  });
  let userData = ref<any>({
    title: '用户',
    go: false,
    addText: '',
    value: '4',
    icon: '',
    type: 'number',
    unit: {
      flag: false,
      tip: '',
      text: '',
    },
  });
  let customerData = ref<any>({
    title: '客户',
    go: false,
    addText: '',
    value: '4',
    icon: '',
    type: 'number',
    unit: {
      flag: false,
      tip: '',
      text: '',
    },
  });
  let documentData = ref<any>({
    title: '文档',
    go: true,
    addText: '编辑',
    value: [
      { name: '警报', icon: '111' },
      { name: '仪表板', icon: '111' },
      { name: '设备', icon: '111' },
      { name: '警报', icon: '111' },
      { name: '所有客户', icon: '111' },
    ],
    icon: '',
    type: 'Array',
    unit: {
      flag: false,
      tip: '',
      text: '',
    },
  });
  let configurationFunctions = ref<any>({
    title: '配置的功能',
    go: false,
    addText: '',
    value: [
      { name: '警报', icon: 'material-symbols:close-small' },
      { name: '仪表板', icon: 'material-symbols:close-small' },
      { name: '设备', icon: 'ic:baseline-check' },
      { name: '警报', icon: 'ic:baseline-check' },
      { name: '所有客户', icon: 'ic:baseline-check' },
    ],
    icon: '',
    type: 'iconArray',
    unit: {
      flag: false,
      tip: '',
      text: '',
    },
  });
  let versionData = ref<any>({
    title: '版本',
    go: false,
    addText: '联系我们',
    value: {
      version: '3.6.1',
    },
    icon: '',
    type: 'version',
    unit: {
      flag: false,
      tip: '',
      text: '',
    },
  });
  let send1 = ref<any>({
    attrSubCmds: [],
    tsSubCmds: [],
    historyCmds: [],
    entityDataCmds: [
      {
        query: {
          entityFilter: {
            type: 'apiUsageState',
            resolveMultiple: true,
          },
          pageLink: {
            page: 0,
            pageSize: 1024,
            textSearch: null,
            dynamic: true,
          },
          entityFields: [
            {
              type: 'ENTITY_FIELD',
              key: 'name',
            },
            {
              type: 'ENTITY_FIELD',
              key: 'label',
            },
            {
              type: 'ENTITY_FIELD',
              key: 'additionalInfo',
            },
          ],
          latestValues: [
            {
              type: 'TIME_SERIES',
              key: 'clusterMode',
            },
          ],
        },
        latestCmd: {
          keys: [
            {
              type: 'TIME_SERIES',
              key: 'clusterMode',
            },
          ],
        },
        cmdId: 1,
      },
    ],
    entityDataUnsubscribeCmds: [],
    alarmDataCmds: [],
    alarmDataUnsubscribeCmds: [],
    entityCountCmds: [
      {
        query: {
          entityFilter: {
            type: 'entityType',
            resolveMultiple: true,
            entityType: 'TENANT',
          },
        },
        cmdId: 2,
      },
      {
        query: {
          entityFilter: {
            type: 'entityType',
            resolveMultiple: true,
            entityType: 'TENANT_PROFILE',
          },
        },
        cmdId: 3,
      },
      {
        query: {
          entityFilter: {
            type: 'entityType',
            resolveMultiple: true,
            entityType: 'DEVICE',
          },
        },
        cmdId: 4,
      },
      {
        query: {
          entityFilter: {
            type: 'entityType',
            resolveMultiple: true,
            entityType: 'ASSET',
          },
        },
        cmdId: 5,
      },
      {
        query: {
          entityFilter: {
            type: 'entityType',
            resolveMultiple: true,
            entityType: 'USER',
          },
        },
        cmdId: 6,
      },
      {
        query: {
          entityFilter: {
            type: 'entityType',
            resolveMultiple: true,
            entityType: 'CUSTOMER',
          },
        },
        cmdId: 7,
      },
    ],
    entityCountUnsubscribeCmds: [],
    alarmCountCmds: [],
    alarmCountUnsubscribeCmds: [],
  });
  let send2 = ref<any>({
    attrSubCmds: [],
    tsSubCmds: [],
    historyCmds: [],
    entityDataCmds: [
      {
        query: {
          entityFilter: {
            type: 'apiUsageState',
            resolveMultiple: true,
          },
          pageLink: {
            pageSize: 1024,
            page: 0,
            sortOrder: {
              key: {
                type: 'ENTITY_FIELD',
                key: 'createdTime',
              },
              direction: 'DESC',
            },
          },
          entityFields: [
            {
              type: 'ENTITY_FIELD',
              key: 'name',
            },
            {
              type: 'ENTITY_FIELD',
              key: 'label',
            },
            {
              type: 'ENTITY_FIELD',
              key: 'additionalInfo',
            },
          ],
          latestValues: [],
        },
        cmdId: 8,
      },
    ],
    entityDataUnsubscribeCmds: [],
    alarmDataCmds: [],
    alarmDataUnsubscribeCmds: [],
    entityCountCmds: [],
    entityCountUnsubscribeCmds: [],
    alarmCountCmds: [],
    alarmCountUnsubscribeCmds: [],
  });
  let send3 = ref<any>({
    attrSubCmds: [],
    tsSubCmds: [],
    historyCmds: [],
    entityDataCmds: [
      {
        cmdId: 8,
        historyCmd: {
          keys: ['transportMsgCountHourly'],
          startTs: 1707532198059,
          endTs: 1710124198059,
          interval: 86400000,
          limit: 30,
          agg: 'SUM',
        },
      },
    ],
    entityDataUnsubscribeCmds: [],
    alarmDataCmds: [],
    alarmDataUnsubscribeCmds: [],
    entityCountCmds: [],
    entityCountUnsubscribeCmds: [],
    alarmCountCmds: [],
    alarmCountUnsubscribeCmds: [],
  });
  let send4 = ref<any>({
    attrSubCmds: [],
    tsSubCmds: [],
    historyCmds: [],
    entityDataCmds: [
      {
        query: {
          entityFilter: {
            type: 'apiUsageState',
            resolveMultiple: true,
          },
          pageLink: {
            pageSize: 1024,
            page: 0,
            sortOrder: {
              key: {
                type: 'ENTITY_FIELD',
                key: 'createdTime',
              },
              direction: 'DESC',
            },
          },
          entityFields: [
            {
              type: 'ENTITY_FIELD',
              key: 'name',
            },
            {
              type: 'ENTITY_FIELD',
              key: 'label',
            },
            {
              type: 'ENTITY_FIELD',
              key: 'additionalInfo',
            },
          ],
          latestValues: [],
        },
        cmdId: 9,
      },
    ],
    entityDataUnsubscribeCmds: [],
    alarmDataCmds: [],
    alarmDataUnsubscribeCmds: [],
    entityCountCmds: [],
    entityCountUnsubscribeCmds: [],
    alarmCountCmds: [],
    alarmCountUnsubscribeCmds: [],
  });
  let send5 = ref<any>({
    attrSubCmds: [],
    tsSubCmds: [],
    historyCmds: [],
    entityDataCmds: [
      {
        query: {
          entityFilter: {
            type: 'apiUsageState',
            resolveMultiple: true,
          },
          pageLink: {
            page: 0,
            pageSize: 1024,
            textSearch: null,
            dynamic: true,
          },
          entityFields: [
            {
              type: 'ENTITY_FIELD',
              key: 'name',
            },
            {
              type: 'ENTITY_FIELD',
              key: 'label',
            },
            {
              type: 'ENTITY_FIELD',
              key: 'additionalInfo',
            },
          ],
          latestValues: [
            {
              type: 'TIME_SERIES',
              key: 'cpuUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'cpuCount',
            },
            {
              type: 'TIME_SERIES',
              key: 'cpuUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'cpuUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'memoryUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'totalMemory',
            },
            {
              type: 'TIME_SERIES',
              key: 'memoryUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'memoryUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'discUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'totalDiscSpace',
            },
            {
              type: 'TIME_SERIES',
              key: 'discUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'discUsage',
            },
          ],
        },
        latestCmd: {
          keys: [
            {
              type: 'TIME_SERIES',
              key: 'cpuUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'cpuCount',
            },
            {
              type: 'TIME_SERIES',
              key: 'cpuUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'cpuUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'memoryUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'totalMemory',
            },
            {
              type: 'TIME_SERIES',
              key: 'memoryUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'memoryUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'discUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'totalDiscSpace',
            },
            {
              type: 'TIME_SERIES',
              key: 'discUsage',
            },
            {
              type: 'TIME_SERIES',
              key: 'discUsage',
            },
          ],
        },
        cmdId: 10,
      },
    ],
    entityDataUnsubscribeCmds: [],
    alarmDataCmds: [],
    alarmDataUnsubscribeCmds: [],
    entityCountCmds: [],
    entityCountUnsubscribeCmds: [],
    alarmCountCmds: [],
    alarmCountUnsubscribeCmds: [],
  });
  let sendParams = ref<any>({
    attrSubCmds: [],
    tsSubCmds: [],
    historyCmds: [],
    entityDataCmds: [
      {
        cmdId: 9,
        tsCmd: {
          keys: ['cpuUsage', 'memoryUsage', 'discUsage'],
          startTs: 1710120600000,
          timeWindow: 3610000,
          interval: 10000,
          limit: 361,
          agg: 'AVG',
        },
      },
    ],
    entityDataUnsubscribeCmds: [],
    alarmDataCmds: [],
    alarmDataUnsubscribeCmds: [],
    entityCountCmds: [],
    entityCountUnsubscribeCmds: [],
    alarmCountCmds: [],
    alarmCountUnsubscribeCmds: [],
  });
  let echartsList = ref<Array<any>>([
    {
      title: 'CPU',
      data: [],
    },
    {
      title: '内存',
      data: [],
    },
    {
      title: '磁盘',
      data: [],
    },
  ]);
  let msgEchartsList = ref<Array<any>>([]);
  const myCard: Ref<HTMLElement | null> = ref(null);
  // 在任意Vue组件内
  const wsUrl = 'ws://47.110.73.94:1523/api/ws/plugins/telemetry?token=';
  const token: any = localStorage.getItem('jwt_token');

  const { data, send } = useWebSocket(`${wsUrl}${token}`, {
    autoClose: false,
    autoReconnect: false,
    heartbeat: false,
    onMessage: () => {
      let res = JSON.parse(data.value);
      if (res.cmdUpdateType === 'ENTITY_DATA' && res.update !== null && res.cmdId === 9) {
        Object.keys(res.update[0].timeseries).forEach((keys) => {
          if (keys === 'cpuUsage') {
            res.update[0].timeseries[keys].forEach((item) => {
              echartsList.value[0].data.push([
                dayjs(item.ts).format('YYYY-MM-DD HH:mm:ss'),
                item.value,
              ]);
            });
          }
          if (keys === 'memoryUsage') {
            res.update[0].timeseries[keys].forEach((item) => {
              echartsList.value[1].data.push([
                dayjs(item.ts).format('YYYY-MM-DD HH:mm:ss'),
                item.value,
              ]);
            });
          }
          if (keys === 'discUsage') {
            res.update[0].timeseries[keys].forEach((item) => {
              echartsList.value[2].data.push([
                dayjs(item.ts).format('YYYY-MM-DD HH:mm:ss'),
                item.value,
              ]);
            });
          }
        });
      }
      if (res.cmdUpdateType === 'ENTITY_DATA' && res.update !== null && res.cmdId === 8) {
        res.update[0].timeseries.transportMsgCountHourly.forEach((item) => {
          msgEchartsList.value.push([dayjs(item.ts).format('YYYY-MM-DD HH:mm:ss'), item.value]);
        });
      }
      if (res.cmdUpdateType === 'COUNT_DATA') {
        if (res.cmdId === 2 || res.cmdId === 13) {
          tenantData.value.value = res.count;
        }
        if (res.cmdId === 3 || res.cmdId === 14) {
          allocation.value.value = res.count;
        }
        if (res.cmdId === 4 || res.cmdId === 15) {
          deviceData.value.value = res.count;
        }
        if (res.cmdId === 5 || res.cmdId === 16) {
          assetData.value.value = res.count;
        }
        if (res.cmdId === 6 || res.cmdId === 17) {
          userData.value.value = res.count;
        }
        if (res.cmdId === 7 || res.cmdId === 18) {
          customerData.value.value = res.count;
        }
      }
      if (res.cmdUpdateType === 'ENTITY_DATA' && res.update !== null) {
        if (res.cmdId === 19 || res.cmdId === 10) {
          let data = res.update[0].latest.TIME_SERIES;
          cpuData.value.value = `${data.cpuUsage.value}%`;
          memoryData.value.value = `${data.memoryUsage.value}%`;
          diskData.value.value = `${data.discUsage.value}%`;
        }
      }
    },
  });
  onMounted(() => {
    send(JSON.stringify(send1.value));
    send(JSON.stringify(send2.value));
    send(JSON.stringify(send3.value));
    send(JSON.stringify(send4.value));
    send(JSON.stringify(send5.value));
    send(JSON.stringify(sendParams.value));
  });
</script>
